<template>
    <div class="iframe">
        <div class="i-title">
            <h3>状态处理</h3>
        </div>
        <div class="i-tip">
            <div class="i-tip" v-loading="data.loading">{{ data.tip }}</div>
            <el-button @click="btnSend">多次请求</el-button>
            <el-button @click="btnSend2">请求速度</el-button>
        </div>
    </div>
</template>
<script setup>
import { reactive, onMounted } from 'vue';
import { ElNotification } from 'element-plus'

let data = reactive({
    loading: false,
    tip: "",
    tip2: ""
})
function p1(n) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            if (n > 0) {
                resolve(n)
            } else {
                reject('不能小于0')
            }
        }, 1000)
    })
}
function loadData() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve("请求成功!")
        }, 5000)
    })
}
function timeOut() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            reject("请求超时!")
        }, 5000)
    })
}
function btnSend() {
    data.loading = true;
    data.tip = "";
    Promise.all([
        p1(5), p1(2), p1(7)
    ]).then(v => {
        console.log(v)
        data.loading = false;
        data.tip = "加载成功！"
    }, e => {
        console.log(e)
        ElNotification({
            title: '错误',
            message: e,
            type: 'error',
        })
    })
}
function btnSend2() {
    data.loading = true;
    data.tip = "";
    // 1.说明比谁执行的快，作为执行回调函数标准
    Promise.race([
        loadData(),
        timeOut()
    ]).then(v => {
        console.log(v)
        data.loading = false;
        data.tip = v;
    }, e => {
        console.log(e)
        ElNotification({
            title: '错误',
            message: e,
            type: 'error',
        })
    })
}
</script>